import React, { useState } from 'react'
import { connect } from 'react-redux'

export const Address = (props) => {
    const { addressList } = props;

    const [isEdit, setIsEdit] = useState(false)
    const [formData, setFormData] = useState({
        name: '',
        phone: '',
        area: "",
        city: "",
        id: "",
        address: "",
    })

    // 回显 
    const show = (item) => {
        setFormData(JSON.parse(JSON.stringify(item)))
        // 改变状态
        setIsEdit(true)
    }
    return (
        <div>
            {/* 默认列表 */}
            <TableCom show={show} {...props}></TableCom>
            {/* 编辑表单 */}
            <FormCom
                {...props}
                formData={formData}
                setFormData={setFormData}
                isEdit={isEdit}
                setIsEdit={setIsEdit}>
            </FormCom>
        </div>
    )
}



function TableCom(props) {
    const { show, addressList, delAddress, setAddressStatus } = props;
    return <table>
        <tbody>
            {addressList.map((item, index) => {
                return <tr key={index}>
                    <td>{item.name}</td>
                    <td>{item.address}</td>
                    <td>{item.phone}</td>
                    <td>
                        <button onClick={() => {
                            // 回显
                            show(item)
                        }}>编辑</button>
                        <button onClick={() => {
                            delAddress(item.id)
                        }}>删除</button>
                    </td>
                    <td>
                        {item.isInit ? <span>默认地址</span> :
                            <span onClick={() => {
                                setAddressStatus(item.id)
                            }}>设为默认地址</span>}
                    </td>
                </tr>
            })}
        </tbody>
    </table>
}


function FormCom(props) {
    const addressOptions = [
        {
            label: "北京",
            value: 1,
            children: [
                {
                    label: "海淀区",
                    value: 1,
                },
                {
                    label: "朝阳区",
                    value: 2,
                },
                {
                    label: "东城区",
                    value: 3,
                },
                {
                    label: "丰台",
                    value: 4,
                }
            ]
        },
        {
            label: "上海",
            value: 2,
            children: [
                {
                    label: "浦东区",
                    value: 1,
                },
                {
                    label: "奉贤区",
                    value: 2,
                },
                {
                    label: "闵行",
                    value: 3,
                },
                {
                    label: "徐汇",
                    value: 4,
                }
            ]
        }
    ]
    const [areaOptions, setAreaOptions] = useState(addressOptions[0].children)
    const { formData, setFormData, setIsEdit, isEdit, editAddress, addAddress } = props;
    const setFormDataFun = (key, value) => {
        setFormData(prev => {
            return JSON.parse(JSON.stringify({ ...prev, [key]: value }))
        })
    }
    const clearFormData = () => {
        setFormData({
            name: '',
            phone: '',
            area: "",
            city: "",
            id: "",
            address: "",
        })
    }
    return <div className="form">
        <div className="formBox">
            <div className="formList">
                <div className="label">收件人</div>
                <div className="content">
                    <input type="text" value={formData.name} onChange={({ target: { value } }) => {
                        setFormDataFun('name', value)
                    }} />
                </div>
            </div>
            <div className="formList">
                <div className="label">手机号</div>
                <div className="content">
                    <input type="text" value={formData.phone} onChange={({ target: { value } }) => {
                        setFormDataFun('phone', value)
                    }} />
                </div>
            </div>
            <div className="formList">
                <div className="label">所在地区</div>
                <div className="content">
                    <select value={formData.city} onChange={({ target: { value } }) => {
                        setAreaOptions(addressOptions.find(item => item.value == value).children)
                        setFormDataFun('city', value)
                    }}>
                        {addressOptions.map(item => {
                            return <option key={item.value} value={item.value}>{item.label}</option>
                        })}
                    </select>
                    <select value={formData.area} onChange={({ target: { value } }) => {
                        setFormDataFun('area', value)
                    }}>
                        {areaOptions.map(item => {
                            return <option key={item.value} value={item.value}>{item.label}</option>
                        })}
                    </select>
                </div>
            </div>
            <div className="formList">
                <div className="label">详细地址</div>
                <div className="content">
                    <input type="textarea" value={formData.address} onChange={({ target: { value } }) => {
                        setFormDataFun('address', value)
                    }} />
                </div>
            </div>
        </div>
        <button onClick={() => {
            if (isEdit) {
                // 编辑
                editAddress({ ...formData, isInit: false })
                setIsEdit(false)
                clearFormData()
            } else {
                // 添加
                addAddress({ ...formData, isInit: false, id: Date.now() })
                clearFormData()
            }
        }}>提交</button>
    </div>
}


const mapStateToProps = (state) => ({
    ...state
})

const mapDispatchToProps = (dispatch) => {
    return {
        addAddress: (data) => {
            dispatch({ type: "addAddress", data })
        },
        editAddress: (data) => {
            dispatch({ type: "editAddress", data })
        },
        delAddress: (id) => {
            dispatch({ type: "delAddress", data: { id } })
        },
        setAddressStatus: (id) => {
            dispatch({ type: "setAddressStatus", data: { id } })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Address)
